<!DOCTYPE html>
<html lang="zh-cn">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">




<title>Flex | Miles`s</title>

<link rel="stylesheet" href="https://mada.gitee.io/notes//css/styles.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" 
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/zenburn.min.css" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="https://mada.gitee.io/notes//js/highlight.js"></script>






<div class="container">
    <nav class="navbar level">
      <div class="navbar-brand">
          <a class="nav-item" href="https://mada.gitee.io/notes/"><h1 class="title is-3">Miles`s</h1></a>
      </div>           
      <div class="navbar-menu has-text-centered is-active">
          <div class="navbar-end is-centered">
              
           </div>
      </div>
    </nav>
  </div>
<div class="container">
  <h2 class="subtitle is-6">April 21, 2016</h2>
  <h1 class="subtitle is-size-4-mobile is-size-3-desktop">Flex</h1>
  <div class="content">
    

<h2 id="flex">Flex</h2>

<p>浏览器支持性：ie10+, 其他主流浏览器</p>

<p>可以简便，完整，响应式的实现各种布局</p>

<p>Flexible box  弹性布局</p>

<h3 id="定义">定义</h3>

<pre><code>    .box{
        display:-webkit-flex;
        display:flex;
    }

</code></pre>

<p>行内元素也可以使用Flex布局</p>

<pre><code>    .box{
        display:inline-flex;
    }
</code></pre>

<p>Notes: 元素设置flex之后，<code>float</code> <code>clear</code> <code>vertical-align</code></p>

<h3 id="基本概念">基本概念</h3>

<p>Flex容器（flex container）
Flex项目（flex item）</p>

<p>容器默认存在两根轴：
    - x轴（main axis）： main start  &ndash; main end
    - y轴（cross axis）： cross start &ndash; cross end</p>

<h3 id="容器的属性">容器的属性</h3>

<pre><code>- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
</code></pre>

<h4 id="flex-direction-属性">flex-direction 属性</h4>

<pre><code>    .box{
        flex-direction: row | row-reverse | column | column-reverse;
    }
</code></pre>

<ul>
<li>row(默认值):主轴水平方向，起点左端</li>
<li>row-reverse:起点在右端</li>
<li>columu：垂直方向，起点在上方</li>
<li>column-reverse：垂直方向，起点在下方</li>
</ul>

<h4 id="flex-wrap">flex-wrap</h4>

<pre><code>    .box{
        flex-wrap:nowrap|wrap|wrap-reverse;
    }
</code></pre>

<ul>
<li>wrap-reverse:换行，第一行在下方</li>
</ul>

<h4 id="flex-flew">flex-flew</h4>

<p><code>flex-direction</code> <code>flex-wrap</code> 简写模式</p>

<h3 id="justify-content">justify-content</h3>

<p>定义了item在主轴上的位置</p>

<pre><code>    .box{
        justify-content:flex-start | flex-end | center | space-between | space-around;
    }
</code></pre>

<h3 id="align-items">align-items</h3>

<p>定义了items 在cross轴上的位置</p>

<pre><code>    .box{
        align-items:flex-start | flex-end | center | baseline | stretch;
    }
</code></pre>

<h3 id="align-content">align-content</h3>

<p>定义了cross轴上的对对齐方式</p>

<pre><code>    .box{
        align-content： flex-start | flex-end | center | space-between | space-around | stretch;
    }
</code></pre>

<h4 id="order">order</h4>

<p>定义了项目的排列顺序，数值越小，排列越靠前</p>

<pre><code>    item{
        order: &lt;number&gt;
    }
</code></pre>

<h4 id="flex-grow">flex-grow</h4>

<p>定义了项目的放大比例，默认为0,即如果存在剩余空间，也不放大。</p>

<pre><code>    .item{
        flex-grow:&lt;number&gt; | 0
    }
</code></pre>

<h4 id="flex-shrink">flex-shrink</h4>

<p>定义了项目缩小比例，默认为1,  即如果空间不足，该项目将缩小</p>

<h4 id="flex-basis">flex-basis</h4>

<p>定义了在分配多余空间之前，项目占据主轴空间。</p>

<h4 id="flex-1">flex</h4>

<p><code>flex-grew</code> <code>flex-shrink</code> <code>flex-basis</code> 缩写</p>

<h4 id="align-self">align-self</h4>

<p>允许单个 <code>item</code> 与其他项目不一样的对其方式，</p>

<pre><code>    .item{
        align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }
</code></pre>

  </div>
</div>
<div class="container has-text-centered">
    
</div>

<div class="container has-text-centered">
  
</div>
<section class="section">
  <div class="container has-text-centered">
    <p></p>
  </div>
</section>


